<!-- 预约规则 -->
<template>
  <div class="main-content-container">
    <el-row>
      <el-col>
        <p class="font-size-14-y">预约设置</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <p class="font-size-14-y">预约时段设置</p>
      </el-col>
    </el-row>
    <el-row type="flex" class="rows">
      <el-col :span="7">
        <span class="font-size-14-y">工作时间：</span>
        <el-time-select v-model="requestInfo.name" placeholder="起始时间" :picker-options="{start: '08:00',step: '00:60',end: '24:00'}" />
        <el-time-select v-model="requestInfo.content" placeholder="结束时间" :picker-options="{start: '08:00',step: '00:60',end: '24:00',minTime: requestInfo.name}" />
      </el-col>
      <el-col :span="3">
        <span class="font-size-14-y">时段粒度</span>
        <el-input v-model="requestInfo.input" />
        <span class="font-size-14-y">分</span>
      </el-col>
      <el-col :span="2" class="buttons">
        <el-button @click="generateBtn">快速生成</el-button>
      </el-col>
    </el-row>
    <div class="box-show">
      <el-table ref="singleTable" v-loading="loading" :data="tableData" class="marginTop" border :row-class-name="tableColor" height="400">
        <el-table-column property="date" label="可预约时段" align="center">
          <template slot-scope="scope">
            <el-time-select v-model="scope.row.name" placeholder="起始时间" :picker-options="{start: requestInfo.name,step: '00:'+requestInfo.input,end: requestInfo.content}" />
            ~
            <el-time-select v-model="scope.row.content" placeholder="结束时间" :picker-options="{start: requestInfo.name,step: '00:'+requestInfo.input,end: requestInfo.content,minTime: scope.row.name}" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteRow(scope.row,scope.$index,tableData)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="marginTop buttons">
      <el-button :disabled="flag" @click="addDataBtn">添加</el-button>
      <el-button @click="saveTimeBtn">保存</el-button>
    </div>
    <!-- <p style="text-align:center;" class="buttons">
      <el-button @click="saveTimeBtn">保存</el-button>
    </p> -->
    <!-- <el-row> -->
    <!-- <el-col> -->
    <p class="font-size-14-y">预约取消原因</p>
    <!-- </el-col> -->
    <!-- </el-row> -->
    <div class="box-show">
      <el-table ref="singleTable" :data="cancelTable" border :row-class-name="tableColor" height="300">
        <el-table-column label="取消原因" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.$index===cancelTable.length-1&&flag" v-model="scope.row.content" placeholder="请输入取消原因" clearable />
            <span v-else>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="cancelDeleteRow(scope.row,scope.$index, cancelTable)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="marginTop buttons">
      <el-button :disabled="flag" @click="addCauseBtn">添加</el-button>
      <el-button @click="saveCauseBtn">保存</el-button>
    </div>
    <!-- <p style="text-align:center;" class="buttons">
      <el-button @click="saveCauseBtn">保存</el-button>
    </p> -->
  </div>
</template>

<script>
import { tableColor } from '@/utils/common.js';
export default {
  data() {
    return {
      requestInfo: {
        name: '08:00',
        content: '18:00',
        input: '60',
      },
      tableData: [],
      cancelTable: [],
      flag: false,
      show: false,
      loading: false,
      tableColor,
    };
  },
  created() {
    this.getCreateTimeList();
    this.getCauseList();
  },
  methods: {
    // 预约时段列表
    async getCreateTimeList() {
      this.loading = true;
      const res = await this.$api['reception/subscribe/getCreateList']({ dictionaryId: "785558903319429120" });
      this.loading = false;
      if (res.code !== 200) return this.$message.error(res.message);
      this.tableData = res.data;
    },
    // 快速生成
    async generateBtn() {
      console.log(this.requestInfo.name);
      if (this.requestInfo.name && this.requestInfo.content && this.requestInfo.input) {
        const res = await this.$api['reception/subscribe/setTime']({ ...this.requestInfo, dictionaryId: "785558903319429120" });
        if (res.code !== 200) return this.$message.error('快速生成失败!');
        this.$message.success('快速生成成功!');
        this.getCreateTimeList();
      } else {
        this.$message.info('请完整填写！');
      }
    },
    // 添加预约时段
    addDataBtn() {
      this.tableData.push({
        name: '',
        content: '',
      });
      this.flag = true;
    },
    // 预约时段删除
    async deleteRow(row, index, data) {
      // console.log(data, index, data);
      if (row.id) {
        const confirmResult = await this.$confirm('请确认是否删除预约时段?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).catch((err) => err);
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除');
        }
        const res = await this.$api['reception/subscribe/deleteTime']({ id: row.id });
        if (res.code !== 200) return this.$message.error(res.message);
        this.$message.success('删除时段成功！');
        this.getCreateTimeList();
      } else {
        data.splice(index, 1);
      }
      this.flag = false;
    },
    // 保存
    async saveTimeBtn() {
      if (this.tableData.length && this.tableData.length > 0) {
        this.tableData.map((item, i) => {
          item.code = i + 1;
        });
        let addDataArr = [];
        addDataArr = this.tableData.slice(-1);
        const res = await this.$api['reception/subscribe/createTime']({ optionList: addDataArr, dictionaryId: "785558903319429120" });
        if (res.code !== 200) return this.$message.error(res.message);
        this.$message.success('新增时段成功！');
        this.getCreateTimeList();
      } else {
        this.$message.info('请先填写时段！');
      }
      this.flag = false;
    },
    // 取消原因列表
    async getCauseList() {
      const res = await this.$api['reception/subscribe/getCreateList']({ dictionaryId: "784075582164959232" });
      if (res.code !== 200) return this.$message.error(res.message);
      this.cancelTable = res.data;
    },
    // 添加取消原因
    addCauseBtn() {
      this.cancelTable.push({
        content: '',
      });
      this.flag = true;
    },
    // 保存取消原因
    saveCauseBtn() {
      let saveDataArr = [];
      saveDataArr = this.cancelTable.slice(-1);
      saveDataArr.map(async item => {
        item.name = item.content;
        item.code = item.content;
        if (saveDataArr.length && item.content !== '') {
          const res = await this.$api['reception/subscribe/createTime']({ optionList: saveDataArr, dictionaryId: "784075582164959232" });
          if (res.code !== 200) return this.$message.error(res.message);
          this.$message.success('新增取消原因成功！');
          this.getCauseList();
        } else {
          this.$message.info('请先填写取消原因！');
        }
      });
      this.flag = false;
    },
    // 取消原因删除
    async cancelDeleteRow(row, index, data) {
      if (row.id) {
        const confirmResult = await this.$confirm('请确认是否删除取消原因?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).catch((err) => err);
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除');
        }
        const res = await this.$api['reception/subscribe/deleteTime']({ id: row.id });
        if (res.code !== 200) return this.$message.error(res.message);
        this.$message.success('删除原因成功！');
        this.getCauseList();
      } else {
        data.splice(index, 1);
      }
      this.flag = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.rows {
  .el-col {
    .el-input {
      width: 25%;
    }
  }
}
.main-content-container .marginTop {
  margin-top: 20px;
}
.box-show{
  padding-bottom: 20px;
  margin-top: 20px;
}
/deep/.el-input__prefix, /deep/.el-input__suffix{
  color: #D3DFF7 !important;
}

</style>

